<template>
	<view class="my">

		<!-- 标题栏 start -->
		<view class="page-bar" :style="{ height: StatusBar + 'px' }">
			<image src="../../../../static/my-background.png" mode="widthFix"></image>
		</view>
		<view :style="{ height: StatusBar + 'px' }"></view>
		<!-- 标题栏 end -->
		<!-- 头部 start -->
		<view class="page-header" :style="{ height: headerHight }">
			<image src="../../../../static/my-background.png" mode="widthFix" class="bg-img"></image>
			<view v-if="userInfo" @click="handleJump" data-url="/pages/user/user/info/index" class="header-info flex ">
				<view class="shop-logo flex justify-center">
					<view class="img">
						<fu-image :src="shopInfo.store_logo" errorImg="/static/logo.png" mode="aspectFill">
						</fu-image>
					</view>
				</view>
				<!-- <view class="flex flex-direction text-white">
					<view class="flex align-center">
						<text class="shop-name text-bold flex-sub">{{shopInfo.store_name}}</text>
						<text class="level flex align-center justify-center">{{shopInfo.level_name}}</text>
						<text class="auth">{{shopInfo.certification_status}}</text>
					</view>
					<text class="text-sm margin-top-sm">店铺星级：{{shopInfo.store_star}}星</text>
					<view class="text-sm margin-top-xs">
						<text>主营行业：{{shopInfo.main_industry}}</text>
						<text class="margin-left">店铺状态：{{shopInfo.store_status}}</text>
					</view>
					<text class="text-sm margin-top-xs">到期时间：{{shopInfo.expiration_time}}</text>
				</view> -->
				<view class="flex flex-direction text-white">
					<view class="flex align-center">
						<text class="shop-name text-bold flex-sub ">{{shopInfo.store_name}}</text>
						<text class="level flex align-center justify-center">{{shopInfo.level_name}}</text>
					</view>
					<view class="flex align-center" style="margin-top: 9rpx;">
						<!-- <text class="auth">{{certification_status}}</text> -->
						<image src="../../../../static/rz.png" mode="" style="width: 126rpx;height: 33rpx;margin-right: 16rpx"></image>
						<view class="" style="margin-top: -8rpx;">
							<fu-star  :value="shopInfo.store_star"></fu-star>
						</view>
						<text class="text-sm" style="margin-left: 10rpx;">{{shopInfo.store_star}}</text>
					</view>
					<view class="text-sm margin-top-xs">
						<text>主营行业：{{shopInfo.main_industry}}</text>
						<text class="margin-left">店铺状态：{{shopInfo.store_status}}</text>
					</view>
					<text class="text-sm margin-top-xs">到期时间：{{shopInfo.expiration_time}}</text>
				</view>
			</view>
			<view v-else @click="handleJump" data-url="/pages/user/login/login-password/index" class="header-info">
				<view class="shop-logo flex justify-center align-center">
					<view class="img round">
						<fu-image radius="50%" :src="shopInfo.store_logo" errorImg="/static/logo.png" mode="aspectFill">
						</fu-image>
					</view>
				</view>
				<view class="shop-name text-lg text-white text-center">请先登录</view>
			</view>
		</view>
		<!-- 头部 end -->
		<!-- 可用余额 start -->
		<!-- <view class="fu-balance" @click="goMyWallet">
			<image class="fu-balance-bg" src="../../../../static/balance-bg.png" mode="aspectFill" />
			<view class="fu-balance-main">
				<text class="text-df text-333 fu-money-title">可用余额</text>
				<view class="fu-balance-money">
					<text class="text-bold fu-money">
						¥<text
							class="text-xxl">{{ shopInfo.user_money | priceInt }}</text>.{{ shopInfo.user_money | priceFloat }}
					</text>
					<text class="fu-iconfont fu-money-arrow"> &#xe82d; </text>
				</view>
			</view>
		</view> -->
		<!-- 可用余额 end -->

		<!-- 列表导航 start -->
		<view class="menu-box margin-top-sm margin-lr bg-white radius-16" :style="{marginTop:contentTop + 'px'}">
			<view class="cu-list menu">
				<!-- <view class="flex align-center  fu-list-item" @click="goMyWallet">
					<view class="fu-iconfont ml-30">
						<image class="fu-list-pic" src="../../../../static/qiaobao.png" mode="aspectFit" />
					</view>
					<view class=" fu-item-main solid-bottom">
						<text class="text-block text-df">我的钱包</text>
						<image class="list-arrow" src="../../../../static/right-arrow.png" mode="aspectFit"></image>
					</view>
				</view> -->
				<view class="flex align-center  fu-list-item" @click="handleJump"
					data-url="/pages/index/setting/feedback/index">
					<view class="fu-iconfont ml-30">
						<image class="fu-list-pic" src="../../../../static/opinion.png" mode="aspectFit" />
					</view>
					<view class=" fu-item-main solid-bottom">
						<text class="text-block text-df">意见反馈</text>
						<image class="list-arrow" src="../../../../static/right-arrow.png" mode="aspectFit"></image>
					</view>
				</view>

				<view class="flex align-center fu-list-item" @click="handleJump"
					data-url="/pages/index/setting/about-we/index">
					<view class="fu-iconfont ml-30">
						<image class="fu-list-pic" src="../../../../static/about.png" mode="aspectFit" />
					</view>
					<view class="fu-item-main solid-bottom">
						<text class="text-block text-df">关于我们</text>
						<image class="list-arrow" src="../../../../static/right-arrow.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="flex align-center fu-list-item" @click="handleJump" data-url="/pages/index/help/help/index">
					<view class="fu-iconfont ml-30">
						<image class="fu-list-pic" src="../../../../static/help.png" mode="aspectFit" />
					</view>
					<view class="fu-item-main solid-bottom">
						<text class="text-block text-df">帮助中心</text>
						<image class="list-arrow" src="../../../../static/right-arrow.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="flex align-center fu-list-item" @click="handleJump"
					data-url="/pages/index/setting/setting/index">
					<view class="fu-iconfont ml-30">
						<image class="fu-list-pic" src="../../../../static/setting.png" mode="aspectFit" />
					</view>
					<view class="fu-item-main">
						<text class="text-block text-df">设置</text>
						<image class="list-arrow" src="../../../../static/right-arrow.png" mode="aspectFit"></image>
					</view>
				</view>

			</view>
		</view>
		<!-- 列表导航 end -->


		<!-- 断网检测 -->
		<fu-notwork></fu-notwork>


	</view>
</template>

<script>
	/**
	 * @author 刘畅
	 */
	import {
		navigateToLogin
	} from '@/common/utils/utils.js';
	export default {
		data() {
			return {
				opacity: 0, // {Number} topBar的透明度
				messageNum: 0, // {Number} 右上角消息角标
				showBarTitle: false, // {Boolean} 是否显示barTitle
				shopInfo: { // {Object} 店铺信息
					store_name: '请先登陆',
					user_money: '0.00',
				},
				showLoading: true, // {Boolean} 是否显示loading图
			}
		},
		onShow() {
			console.log('用户token', global.token)
			if (global.token) {
				this.geShopInfo();
			} else {
				this.showLoading = false;
				this.shopInfo = {
					store_name: '请先登陆',
					user_money: '0.00',
				}

				navigateToLogin()

				// this.$message.info('登陆查看更多哦')
			}

		},
		computed: {
			//计算头部高度
			headerHight() {
				let h = 'calc(460rpx - ' + this.StatusBar + 'px)';
				return h;
			},
			// 用户信息
			userInfo() {
				return this.$store.getters.userInfo;
			},
			contentTop(){
				// #ifdef APP-PLUS
				return -this.StatusBar-10
				// #endif
				return -70
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 150) {
				this.showBarTitle = false;
			}

			if (e.scrollTop > 150) {
				this.showBarTitle = true;
			}
			// 计算topBar的透明度
			let _top = e.scrollTop;
			if (_top > 0) {
				if (_top <= this.CustomBar) {
					let _opacity = (_top / this.CustomBar).toFixed(1);
					this.opacity = _opacity;
				} else {
					this.ordernum = {
						deliver: 0,
						evaluate: 0,
						no_pay: 0,
						receiv: 0,
						refund: 0,
						msg_num: 0,
					};
					/**
					 * @description
					 * @param {String} setBadge - VueX方法名
					 * @param {Number} 0 - 传递的参数
					 */
					this.$store.commit("setBadge", 0);
				}
				/**
				 * @description 这里记录从其他页面返回时处理头部透明度问题
				 */
				let that = this;
				uni
					.createSelectorQuery()
					.in(this)
					.select("#userInfo")
					.boundingClientRect((pos) => {
						// console.log(pos);
						if (pos) {
							let posTop = pos.top;
							if (posTop < that.CustomBar && posTop > 0) {
								that.opacity = ((that.CustomBar - posTop) / that.CustomBar).toFixed(
									1
								);
							} else if (posTop >= that.CustomBar) {
								that.opacity = 0;
							} else {
								that.opacity = 1;
							}
						}
					})
					.exec();
			}
		},
		filters: {
			/**
			 * @function 取价格整数部分
			 * @param {Number} val - 原来的价格
			 * @returns 价格的整数部分
			 */
			priceInt(val) {
				return val && val << 0
			},
			/**
			 * @function 取价格小数部分
			 * @param {Number} val - 原来的价格
			 * @returns 价格的小数部分
			 */
			priceFloat(val) {
				return val && val.toString().split('.')[1]
			}
		},
		methods: {
			/**
			 * @event 去钱包页面
			 */
			goMyWallet() {
				if (global.token) {
					this.$urouter.navigateTo('/pages/user/wallet/my-wallet/index')
				} else {
					this.$message.info('请先登录哟')
				}
			},
			/**
			 * @function 获取店铺信息
			 * @property {Object} data - 请求接口鞋带的信息
			 * @property {String} data.partner_id - 店铺ID
			 */
			geShopInfo() {
				const data = {
					partner_id: this.$store.state.userInfo.id,
				}
				this.$api.post(global.apiUrls.postShopInfo, data)
					.then(res => {
						console.log('xxxx', res)
						if (res.data.code == 1) {
							this.shopInfo = res.data.data;
							this.$store.commit('updataShopInfo', res.data.data);
							console.log(this.$store.state.shopInfo)
							this.showLoading = false;
						} else {
							this.showLoading = false;
						}
					})
					.catch(err => {
						this.showLoading = false;
						console.log('获取店铺信息错误==>', err);
					})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.my {
		padding-bottom: 32rpx;
		position: relative;
		height: calc(100vh - 88rpx);
	}

	.header-info {
		position: relative;
		z-index: 1;
		padding: 60rpx 24rpx 24rpx 24rpx;
	}

	.radius-16 {
		border-radius: 16rpx;
		overflow: hidden;
	}

	.block-50 {
		width: 50rpx;
		min-width: 50rpx;
		height: 50rpx;
		min-height: 50rpx;
	}

	.block-32 {
		width: 32rpx;
		min-width: 32rpx;
		height: 32rpx;
		min-height: 32rpx;
	}

	.block-144 {
		width: 144rpx;
		min-width: 144rpx;
		height: 144rpx;
		min-height: 144rpx;
		border: 4rpx solid #FFFFFF;
	}

	.userInfo {
		width: 100%;

		.fu-userInfo-head {
			display: block;
			margin: 0 auto;
		}

		.fu-userInfo-name {
			margin-top: 16rpx;
			text-align: center;
		}
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.menu-box {
		z-index: 10;
		position: relative;
	}

	// 我的订单
	.my-order {
		image {
			width: 50rpx;
			height: 50rpx;
		}

		.item {
			position: relative;

			.jiaobiao {
				position: absolute;
				top: -20rpx;
				right: 30rpx;
				color: #f02523;
				font-size: 24rpx;
				border: 1rpx solid #f02523;
				border-radius: 100rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: #ffffff;
				z-index: 9;
			}
		}
	}

	.ml-30 {
		margin-right: 20rpx;
		margin-left: 10rpx;
		height: 40rpx;
	}

	// 头像旁的文字
	.fu-headpic-text {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 128rpx;

		.fu-line-height {
			line-height: 34rpx;
		}
	}

	// 背景图片
	.fu-my-background {
		position: absolute;
		top: 0;
		z-index: -1;
		width: 100%;

		image {
			width: 100%;
		}
	}

	// 列表功能入口
	.fu-list-item {
		height: 110rpx;
		width: 100%;
		padding: 0 32rpx 0 32rpx;

		.fu-list-pic {
			width: 40rpx;
			height: 40rpx;
		}

		.list-arrow {
			width: 14rpx;
			height: 30rpx;
		}

		.fu-item-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 110rpx;
			width: 100%;
		}
	}


	// 快捷功能入口
	.fu-month-in {
		height: 158rpx;
		margin-top: 60rpx;

		.fu-in-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			height: 158rpx;
		}
	}

	// 可用余额
	.fu-balance {
		position: relative;
		width: 686rpx;
		height: 122rpx;
		margin: -100rpx auto 0;
		z-index: 1;

		.fu-balance-bg {
			position: absolute;
			width: 686rpx;
			height: 122rpx;
			z-index: -1;
		}

		.fu-balance-main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			width: 100%;
			height: 122rpx;

			.fu-money-title {}

			.fu-balance-money {
				display: flex;
				align-items: center;

				.fu-money {
					color: #FF5001;
					font-size: 32rpx;
					margin-right: 10rpx;
				}

				.fu-money-arrow {
					font-size: 12rpx !important;
				}
			}
		}
	}


	// 标题栏 start
	.page-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	// 标题栏 end
	// 头部 start
	.page-header {
		width: 100%;
		position: relative;

		.bg-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.shop-logo {
			padding:  0 20rpx;

			.img {
				width: 146rpx;
				height: 146rpx;
				background: #ffffff;
				border-radius: 16rpx !important;
			}
		}

		.shop-name {
			font-size: 36rpx;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	// 头部 end
	
	.level{
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding:3rpx 10rpx;
		margin: 0 10rpx;
	}
	.auth{
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding:3rpx 10rpx;
		margin: 0 10rpx;
	}
</style>
